<template>
  <div id="right-kefu">
    <div id="go-back1">
      <div class="toppart">
        <!-- <div class="kefu">
          <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=991588573&site=qq&menu=yes">
            <img src="@/assets/image/Icon-kefu.png" width="100%"/>
          </a>
          <span>在线客服</span>
        </div>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=991588573&site=qq&menu=yes">
          <div class="buy-rect">购卡咨询</div>
        </a>-->

        <div>
          <img
            src="https://njmcsw.oss-cn-beijing.aliyuncs.com/guanwang/mc.jpg"
            width="100%"
          />
        </div>
        <div class="QR-code-h5">
          <h5>微信公众号</h5>
        </div>
      </div>
      <!-- <div class="QR-code-jg">
        <img src="@/assets/image/QR-code-jg.png" width="100%">
      </div>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "right-kefu",
};
</script>

<style scoped lang="scss">
#right-kefu {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  #go-back1 {
    width: 14rem;
    height: 16.9rem;
    background: #cd0000;
    border-radius: 0.4rem;
    position: fixed;
    right: 1.7rem;
    top: 9rem;
    z-index: 9999;

    .toppart {
      width: 12.8rem;
      height: 15.32rem;
      background: #ffffff;
      border-radius: 0.4rem;
      margin: 0rem auto;
      margin-top: 0.816rem;
      .QR-code-h5 {
        text-align: center;
        h5 {
          font-size: 1.4rem;
          font-family: MicrosoftYaHei, MicrosoftYaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #040404;
        }
      }
      .QR-code-img {
        width: 13.6rem;
        margin-right: 3.2rem;
      }
      .kefu {
        display: flex;
        align-items: center;
        padding-top: 1rem;
        margin-bottom: 0.8rem;
        img {
          width: 2.7rem;
          height: 2.7rem;
          margin: 0 0.5rem 0 1rem;
        }
        span {
          font-size: 1.8rem;
          font-family: HuXiaoBo, HuXiaoBo-Regular;
          font-weight: 400;
          text-align: left;
          color: #000000;
        }
      }
    }
    .buy-rect {
      width: 13rem;
      height: 3.3rem;
      background: #ff8239;
      border-radius: 0.4rem;
      margin: 0 auto;
      font-size: 1.8rem;
      font-family: HuXiaoBo, HuXiaoBo-Regular;
      font-weight: 400;
      text-align: center;
      color: #ffffff;
      line-height: 3.3rem;
    }
    .bottompart {
      width: 12.8rem;
      height: 7.4rem;
      background: #ffffff;
      border-radius: 0.4rem;
      margin: 0rem auto;
      margin-top: 0.887rem;
      .kefu {
        display: flex;
        align-items: center;
        padding-top: 1rem;
        margin-bottom: 0.8rem;
        img {
          width: 1.7rem;
          height: 2.1rem;
          margin: 0 0.4rem 0 0.8rem;
        }
        span {
          font-size: 1.5rem;
          font-family: HuXiaoBo, HuXiaoBo-Regular;
          font-weight: 400;
          text-align: left;
          color: #000000;
        }
      }
    }
    .QR-code-jg {
      width: 10.88rem;
      margin-top: 1.6rem;
    }
  }
}
</style>
